<template>
  <div class="EmergencyList">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/DutyIndex' }">值班管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/DutyStatisticsList?dateInfoStatus=0' }">值班统计</el-breadcrumb-item>
        <el-breadcrumb-item v-if="detailStatus == 0">迟到人员统计明细</el-breadcrumb-item>
        <el-breadcrumb-item v-if="detailStatus == 1">早退人员统计明细</el-breadcrumb-item>
        <el-breadcrumb-item v-if="detailStatus == 2">缺勤人员统计明细</el-breadcrumb-item>
        <el-breadcrumb-item v-if="detailStatus == 3">请假人员统计明细</el-breadcrumb-item>
        <el-breadcrumb-item v-if="detailStatus == 4">未及时接班统计明细</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <div class="title">
        <el-button plain size="small" @click="back" class="back">返回</el-button>
      </div>
      <!-- 列表表格 -->
      <LsdTable slot="gjxm" :paginationAtrrs="paginationAtrrs" @pageChange="handleSizeChange" :compRef="table.compRef"
        ref="gjxm" :columns="table.columns" :title="table.title" :actions="table.actions" :tableData="table.tableData"
        :tableAttr="table.tableAttr" :isShowPage="table.isShowPage" :isSelectFlag="table.isSelectFlag"
        :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick" v-if="detailStatus == 0" />

      <LsdTable slot="gjxm" :paginationAtrrs="paginationAtrrs" @pageChange="handleSizeChange" :compRef="table1.compRef"
        ref="gjxm" :columns="table1.columns" :title="table1.title" :actions="table1.actions" :tableData="table1.tableData"
        :tableAttr="table1.tableAttr" :isShowPage="table1.isShowPage" :isSelectFlag="table1.isSelectFlag"
        :isSequenceFlag="table1.isSequenceFlag" @onActionClick="onActionClick" v-if="detailStatus == 1" />

      <LsdTable slot="gjxm" :paginationAtrrs="paginationAtrrs" @pageChange="handleSizeChange" :compRef="table2.compRef"
        ref="gjxm" :columns="table2.columns" :title="table2.title" :actions="table2.actions" :tableData="table2.tableData"
        :tableAttr="table2.tableAttr" :isShowPage="table2.isShowPage" :isSelectFlag="table2.isSelectFlag"
        :isSequenceFlag="table2.isSequenceFlag" @onActionClick="onActionClick" v-if="detailStatus == 2" />

      <LsdTable slot="gjxm" :paginationAtrrs="paginationAtrrs" @pageChange="handleSizeChange" :compRef="table3.compRef"
        ref="gjxm" :columns="table3.columns" :title="table3.title" :actions="table3.actions" :tableData="table3.tableData"
        :tableAttr="table3.tableAttr" :isShowPage="table3.isShowPage" :isSelectFlag="table3.isSelectFlag"
        :isSequenceFlag="table3.isSequenceFlag" @onActionClick="onActionClick" v-if="detailStatus == 3" />

      <LsdTable slot="gjxm" :paginationAtrrs="paginationAtrrs" @pageChange="handleSizeChange" :compRef="table4.compRef"
        ref="gjxm" :columns="table4.columns" :title="table4.title" :actions="table4.actions" :tableData="table4.tableData"
        :tableAttr="table4.tableAttr" :isShowPage="table4.isShowPage" :isSelectFlag="table4.isSelectFlag"
        :isSequenceFlag="table4.isSequenceFlag" @onActionClick="onActionClick" v-if="detailStatus == 4" />
      <!-- 值班计划弹窗 -->
      <LsdDialog :dialogConfig="shenpiDialogConfig" @handleBtn="shenpiHandleBtn" @close="shenpiClose" ref="shenpi_dialog">
        <LsdDialogTitle slot="dialog" :titleConfig="titleConfig" :activeNames="activeNames">
          <el-form slot="slot0" ref="add_form" :model="add_form" label-width="120px" size="small"
            v-if="add_form.dutyType == '2'">
            <el-row>
              <el-col :span="8">
                <el-form-item label="值班类别：" prop="dutyCategory">
                  {{
                    duty_category_options.filter(item => item.value ==
                      add_form.dutyCategory)[0].label
                  }}
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="信息来源：" prop="dutySource">
                  <!--  {{
                  response_options.filter(item => item.id ==
                    add_form.dutySourceId).length && response_options.filter(item => item.id ==
                      add_form.dutySourceId)[0].responseName
                }} -->
                  {{ add_form.dutySource }}
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-form slot="slot1" ref="add_form" :model="add_form" label-width="120px" size="small">
            <el-row>
              <el-col :span="8">
                <el-form-item label="值班计划：" prop="dutyPlan">
                  {{ add_form.dutyPlan }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="值班地点：" prop="dutyAddress">
                  {{ add_form.dutyAddress }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="排班方式：" prop="dutyMode">
                  {{ work_ways.filter(item => item.value == add_form.dutyMode)[0].label }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="值班日期：" prop="dates" v-if="add_form.dutyMode == 2" key="1">
                  {{ add_form.dates[0] }} 至 {{ add_form.dates[1] }}
                </el-form-item>
                <el-form-item label="值班日期：" prop="month" v-else-if="add_form.dutyMode == 1" key="2">
                  {{ add_form.month }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="班次设置：" prop="dutyShift">
                  {{
                    dutyShift_options.filter(item => item.value ==
                      add_form.dutyShift).length && dutyShift_options.filter(item => item.value ==
                        add_form.dutyShift)[0].label
                  }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="备注：" prop="remark">
              {{ add_form.remark }}
            </el-form-item>
          </el-form>
          <div slot="slot2" class="plan-table-box">
            <el-table :data="createPlanTable" style="width: 100%" :header-cell-style="header_cell_style" border
              max-height="400px" :span-method="dateRowMerge">
              <el-table-column prop="dutyDate" label="值班日期" align="center">
              </el-table-column>
              <el-table-column prop="shiftName" label="班次名称" align="center">
              </el-table-column>
              <el-table-column prop="shiftTime" label="班次时间" align="center">
              </el-table-column>
              <el-table-column prop="dutyLeadersName" label="带班领导" align="center" width="170"
                v-if="add_form.dutyType == '2'">

              </el-table-column>
              <el-table-column prop="dutyDirectorName" label="值班长" align="center" v-if="add_form.dutyType == '1'">

              </el-table-column>
              <el-table-column prop="dutyDirectorName" label="值班主任" align="center" v-if="add_form.dutyType == '2'">

              </el-table-column>
              <el-table-column label="值班员" align="center">
                <template slot-scope="scope">
                  <span>{{ formatName(scope.row.staffList) }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div slot="slot3">
            <DialogForm ref="creator" :formConfig="creator_form" />
          </div>
          <!-- 审批人 -->
          <div slot="slot4">
            <DialogForm ref="approve" :formConfig="approve_form" class="approve-form" />
          </div>
        </LsdDialogTitle>
      </LsdDialog>
    </div>
  </div>
</template>

<script>
import { GetUsers } from "@/api/common.js";
import { getByIdApi } from "@/api/duty/daily/plan.js";
import { getAttendanceLateListApi, getAttendanceEarlyListApi, getAttendanceAbsenteeismListApi, getAttendanceLeaveListApi, getAttendanceShiftingOfDutyListApi, exportLateApi, exportEarlyApi, exportAbsenceApi, exportLeaveApi, exportTakeApi } from "@/api/duty/daily/dutyStatistics.js";
import common from "@/utils/common.js";
export default {
  name: "DutyStatisticsDetail",
  components: {},
  data() {
    return {
      detailStatus: 0, // 0迟到 1早退 2缺勤 3请假 4未及时接班
      unitName: "",
      startTime: "",
      endTime: "",
      form: {
      },
      // 迟到表
      table: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "迟到人员统计明细列表",
        actions: [
          {
            id: "onExport",
            text: "导出",
            type: "primary",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "createDeptName",
            label: "所属单位",
            align: "center",
            "min-width": "180px"
          },
          {
            prop: "dutyPlan",
            label: "值班计划",
            align: "center",
            "min-width": "230px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='cursor:pointer;text-decoration: underline;color: #3561FD'
                      {...{
                        on: {
                          click: () => {
                            this.onPreview(row.id);
                          }
                        }
                      }}
                    >
                      {row.dutyPlan}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "dutyDate",
            label: "计划值班时间",
            align: "center",
            "min-width": "120px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span>
                      {row.dutyDate + "\xa0\xa0".concat(row.shiftTime)}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "dutyPersonName",
            label: "姓名",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "contact",
            label: "联系方式",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "unitName",
            label: "所属部门",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "shiftStartTime",
            label: "应签到时间",
            align: "center",
            "min-width": "120px"

          },
          {
            prop: "signTime",
            label: "实际签到时间",
            align: "center",
            "min-width": "120px"

          },
          {
            prop: "timeDiffStr",
            label: "迟到时间",
            align: "center",
            "min-width": "120px"
          }
        ],
        tableAttr: {
          "max-height": "470px",
          height: "470px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": false,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 早退表
      table1: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "早退人员统计明细列表",
        actions: [
          {
            id: "onExport",
            text: "导出",
            type: "primary",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "createDeptName",
            label: "所属单位",
            align: "center",
            "min-width": "180px"
          },
          {
            prop: "dutyPlan",
            label: "值班计划",
            align: "center",
            "min-width": "230px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='cursor:pointer;text-decoration: underline;color: #3561FD'
                      {...{
                        on: {
                          click: () => {
                            this.onPreview(row.id);
                          }
                        }
                      }}
                    >
                      {row.dutyPlan}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "dutyDate",
            label: "计划值班时间",
            align: "center",
            "min-width": "120px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span>
                      {row.dutyDate + "\xa0\xa0".concat(row.shiftTime)}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "dutyPersonName",
            label: "姓名",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "contact",
            label: "联系方式",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "unitName",
            label: "所属部门",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "shiftEndTime",
            label: "应签退时间",
            align: "center",
            "min-width": "120px"

          },
          {
            prop: "signOutTime",
            label: "实际签退时间",
            align: "center",
            "min-width": "120px"

          },
          {
            prop: "timeDiffStr",
            label: "早退时间",
            align: "center",
            "min-width": "120px"
          }
        ],
        tableAttr: {
          "max-height": "470px",
          height: "470px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": false,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 缺勤表
      table2: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "缺勤人员统计明细列表",
        actions: [
          {
            id: "onExport",
            text: "导出",
            type: "primary",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "createDeptName",
            label: "所属单位",
            align: "center",
            "min-width": "180px"
          },
          {
            prop: "dutyPlan",
            label: "值班计划",
            align: "center",
            "min-width": "230px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='cursor:pointer;text-decoration: underline;color: #3561FD'
                      {...{
                        on: {
                          click: () => {
                            this.onPreview(row.id);
                          }
                        }
                      }}
                    >
                      {row.dutyPlan}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "dutyDate",
            label: "计划值班时间",
            align: "center",
            "min-width": "120px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span>
                      {row.dutyDate + "\xa0\xa0".concat(row.shiftTime)}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "dutyPersonName",
            label: "姓名",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "contact",
            label: "联系方式",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "unitName",
            label: "所属部门",
            align: "center",
            "min-width": "120px"
          }
          // {
          //   prop: "occurrenceTime1",
          //   label: "历史缺勤次数",
          //   align: "center",
          //   "min-width": "120px"

          // }
        ],
        tableAttr: {
          "max-height": "470px",
          height: "470px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": false,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 请假表
      table3: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "请假人员统计明细列表",
        actions: [
          {
            id: "onExport",
            text: "导出",
            type: "primary",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "createDeptName",
            label: "所属单位",
            align: "center",
            "min-width": "180px"
          },
          {
            prop: "dutyPlan",
            label: "值班计划",
            align: "center",
            "min-width": "230px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='cursor:pointer;text-decoration: underline;color: #3561FD'
                      {...{
                        on: {
                          click: () => {
                            this.onPreview(row.id);
                          }
                        }
                      }}
                    >
                      {row.dutyPlan}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "dutyDate",
            label: "计划值班时间",
            align: "center",
            "min-width": "120px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span>
                      {row.dutyDate + "\xa0\xa0".concat(row.shiftTime)}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "dutyPersonName",
            label: "姓名",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "contact",
            label: "联系方式",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "unitName",
            label: "所属部门",
            align: "center",
            "min-width": "120px"
          }
          // {
          //   prop: "occurrenceTime1",
          //   label: "历史请假次数",
          //   align: "center",
          //   "min-width": "120px"
          // }
        ],
        tableAttr: {
          "max-height": "470px",
          height: "470px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": false,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 未及时接班表
      table4: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "未及时接班统计明细列表",
        actions: [
          {
            id: "onExport",
            text: "导出",
            type: "primary",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "createDeptName",
            label: "所属单位",
            align: "center",
            "min-width": "180px"
          },
          {
            prop: "dutyPlan",
            label: "值班计划",
            align: "center",
            "min-width": "230px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='cursor:pointer;text-decoration: underline;color: #3561FD'
                      {...{
                        on: {
                          click: () => {
                            this.onPreview(row.id);
                          }
                        }
                      }}
                    >
                      {row.dutyPlan}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "dutyDate",
            label: "计划值班时间",
            align: "center",
            "min-width": "120px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span>
                      {row.dutyDate + "\xa0\xa0".concat(row.shiftTime)}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "handoverTime",
            label: "实际接班时间",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "dutyPersonName",
            label: "值班长",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "unitName",
            label: "所属部门",
            align: "center",
            "min-width": "120px"
          }
        ],
        tableAttr: {
          "max-height": "470px",
          height: "470px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": false,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 分页信息
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
      },
      pageNum: 1,
      pageSize: 10,
      formInline: {
      },
      shenpiDialogConfig: {
        title: "值班计划",
        isShow: false // 弹窗显示隐藏
      },
      // 折叠面板信息
      titleConfig: [
        // {
        //   title: "信息来源",
        //   name: "0",
        //   slot: "slot0"
        // },
        {
          title: "基本信息",
          name: "1",
          slot: "slot1"
        },
        {
          title: "排班计划表",
          name: "2",
          slot: "slot2"
        },
        {
          title: "创建信息",
          name: "3",
          slot: "slot3"
        },
        {
          title: "审批信息",
          name: "4",
          slot: "slot4"
        }
      ],
      // 折叠面板默认展开列
      activeNames: ["1", "2", "3", "4"],
      // 新增/编辑表单
      add_form: {
        id: "",
        dutyType: "1", // 1日常 2应急
        dutyPlan: "", // 值班计划名
        dutyAddress: "", // 值班地点
        dutyMode: 1, // 排班方式 1月 2自定义
        dates: [], // 值班日期
        month: "", // 值班日期 月
        dutyStartDate: "", // 值班开始日期
        dutyEndDate: "", // 值班结束日期
        dutyShift: 2, // 班次设置 2两班 3三班
        remark: "", // 备注
        dutyPlanSaveList: [], // 计划表
        dutySource: "", // 信息来源
        dutySourceId: "",
        dutyCategory: "1" // 值班类别来源;1-应急值班，2-处置值班
      },
      // 值班类型
      duty_category_options: [
        {
          label: "应急",
          value: "1"
        },
        {
          label: "处置",
          value: "2"
        }
      ],
      // 信息来源options
      response_options: [],
      // 带班领导options
      leader_options: [],
      // 排班方式options
      work_ways: [
        {
          label: "按月排班",
          value: 1
        },
        {
          label: "自定义排班",
          value: 2
        }
      ],
      // 班次设置
      dutyShift_options: [
        {
          label: "两班",
          value: 2
        },
        {
          label: "三班",
          value: 3
        }
      ],
      // 表头样式
      header_cell_style: {
        textAlign: "center",
        backgroundColor: "#B1C8F9",
        border: "1px solid #ccc",
        fontSize: "16px",
        color: "#333"
      },
      createPlanTable: [],
      // 填报人
      creator_form: {
        formData: [
          {
            type: "input",
            label: "创建人",
            prop: "creator",
            class: "third",
            lableWidth: "120px",
            isDisabled: true
          },
          {
            type: "input",
            label: "单位及部门",
            prop: "createDeptName",
            class: "third",
            lableWidth: "120px",
            isDisabled: true
          },
          {
            type: "input",
            label: "创建时间",
            prop: "createTime",
            class: "third",
            lableWidth: "120px",
            isDisabled: true
          }
        ]
      },
      // 审批人
      approve_form: {
        formData: [
          {
            type: "input",
            label: "审批意见",
            prop: "approvalOpinion",
            class: "sjgy",
            isDisabled: true,
            lableWidth: "120px"
          },
          {
            type: "input",
            label: "审批人",
            prop: "approvalUser",
            class: "third",
            isDisabled: true,
            lableWidth: "120px"
          },
          {
            type: "input",
            label: "单位及部门",
            prop: "approvalDept",
            class: "third",
            isDisabled: true,
            lableWidth: "120px"
          },
          {
            type: "input",
            label: "审批时间",
            prop: "approvalTime",
            class: "third",
            isDisabled: true,
            lableWidth: "120px"
          }
        ]
      }
    };
  },
  mounted() {
    this.list();
  },
  computed: {

  },
  methods: {
    // 获取全部带班领导
    async getUsers() {
      this.leader_options = await GetUsers();
    },
    shenpiHandleBtn(item) {
      this[item.id]();
    },
    // 关闭值班计划弹窗
    shenpiClose() {
      // this.$refs["formComponent6"].resetFields();
      this.shenpiDialogConfig.isShow = false;
    },
    // 排班计划表日期合并
    dateRowMerge({ row, column, rowIndex, columnIndex }) {
      if (this.add_form.dutyShift == 2) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      } else if (this.add_form.dutyShift == 3) {
        if (columnIndex === 0) {
          if (rowIndex % 3 === 0) {
            return {
              rowspan: 3,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
    },
    // 分页
    handleSizeChange(val) {
      this.pageNum = val["current-page"];
      this.pageSize = val["page-size"];
      this.list();
    },
    // 抛出列表按钮
    onActionClick(item, index) {
      this[item.id](); // 调用按钮对应方法
    },
    // 导出操作
    onExport() {
      const params = {
        unitName: this.unitName,
        startTime: this.startTime,
        endTime: this.endTime
      };
      if (this.detailStatus == 0) {
        exportLateApi(params).then(res => {
          common.downloadByBlob(res, `迟到人员统计明细${new Date().getTime()}.xlsx`);
        });
      } else if (this.detailStatus == 1) {
        exportEarlyApi(params).then(res => {
          common.downloadByBlob(res, `早退人员统计明细${new Date().getTime()}.xlsx`);
        });
      } else if (this.detailStatus == 2) {
        exportAbsenceApi(params).then(res => {
          common.downloadByBlob(res, `缺勤人员统计明细${new Date().getTime()}.xlsx`);
        });
      } else if (this.detailStatus == 3) {
        exportLeaveApi(params).then(res => {
          common.downloadByBlob(res, `请假人员统计明细${new Date().getTime()}.xlsx`);
        });
      } else if (this.detailStatus == 4) {
        exportTakeApi(params).then(res => {
          common.downloadByBlob(res, `未及时接班人员统计明细${new Date().getTime()}.xlsx`);
        });

      }
    },
    // 返回
    back() {
      this.$router.back();
    },
    // 列表
    list() {
      // console.log("222", this.$route.query.detailStatus);
      this.detailStatus = this.$route.query.detailStatus;// 0迟到 1早退 2缺勤 3请假 4未及时接班
      this.unitName = this.$route.query.unitName;
      this.startTime = this.$route.query.startTime;
      this.endTime = this.$route.query.endTime;
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        unitName: this.unitName,
        startTime: this.startTime,
        endTime: this.endTime
      };
      if (this.detailStatus == 0) {
        getAttendanceLateListApi(params).then(res => {
          this.table.tableData = res.data;
          this.paginationAtrrs.total = res.total;
        });
      } else if (this.detailStatus == 1) {
        getAttendanceEarlyListApi(params).then(res => {
          this.table1.tableData = res.data;
          this.paginationAtrrs.total = res.total;
        });
      } else if (this.detailStatus == 2) {
        getAttendanceAbsenteeismListApi(params).then(res => {
          this.table2.tableData = res.data;
          this.paginationAtrrs.total = res.total;
        });
      } else if (this.detailStatus == 3) {
        getAttendanceLeaveListApi(params).then(res => {
          this.table3.tableData = res.data;
          this.paginationAtrrs.total = res.total;
        });
      } else if (this.detailStatus == 4) {
        getAttendanceShiftingOfDutyListApi(params).then(res => {
          this.table4.tableData = res.data;
          this.paginationAtrrs.total = res.total;
        });
      }

    },
    // 值班计划弹窗
    onPreview(id) {
      this.shenpiDialogConfig.isShow = true;

      getByIdApi({ id }).then(res => {
        console.log("值班计划", res);
        res.month = res.dutyStartDate.slice(0, 7);
        res.dates = [res.dutyStartDate.slice(0, 10), res.dutyEndDate.slice(0, 10)];
        this.add_form.dutyType = res.dutyType;
        if (this.add_form.dutyType == 2) {
          this.titleConfig = [
            {
              title: "信息来源",
              name: "0",
              slot: "slot0"
            },
            {
              title: "基本信息",
              name: "1",
              slot: "slot1"
            },
            {
              title: "排班计划表",
              name: "2",
              slot: "slot2"
            },
            {
              title: "创建信息",
              name: "3",
              slot: "slot3"
            }
            // {
            //   title: "审批信息",
            //   name: "4",
            //   slot: "slot4"
            // }
          ];
          this.activeNames = ["0", "1", "2", "3", "4"];
        } else if (this.add_form.dutyType == 1) {
          this.titleConfig = [
            {
              title: "基本信息",
              name: "1",
              slot: "slot1"
            },
            {
              title: "排班计划表",
              name: "2",
              slot: "slot2"
            },
            {
              title: "创建信息",
              name: "3",
              slot: "slot3"
            }
            // {
            //   title: "审批信息",
            //   name: "4",
            //   slot: "slot4"
            // }
          ];
          this.activeNames = ["1", "2", "3", "4"];
        }
        this.$nextTick(() => {
          this.add_form = res;
          this.createPlanTable = res.dutyPlanVoList;

          this.$set(this.$refs.creator.form, "creator", res.creator);
          this.$set(this.$refs.creator.form, "createDeptName", res.createDeptName);
          this.$set(this.$refs.creator.form, "createTime", res.createTime);
          this.$set(this.$refs.approve.form, "approvalUser", res.approvalUser);
          this.$set(this.$refs.approve.form, "approvalDept", res.approvalDept);
          this.$set(this.$refs.approve.form, "approvalTime", res.approvalTime);
          this.$set(this.$refs.approve.form, "approvalOpinion", res.approvalOpinion);
        });

      });
    },
    // 格式化人名
    formatName(arr) {
      return arr.map(item => item.name).join("、");
    }

  }
};
</script>

<style scoped lang="less">
//@import "../../../../assets/style/ComponentStyle.less";

:deep(.el-table th.el-table__cell > .cell) {
  padding-left: 0;
  padding-right: 0;
}

:deep(.el-breadcrumb) {
  font-size: 16px;
}

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
  font-size: 16px;
}

.EmergencyList :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
  font-size: 16px;
}

.box {
  margin-top: 20px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
  height: 78vh;

  :deep(.el-form-item__label) {
    font-size: 16px !important;
    font-family: "Microsoft YaHei UI";
  }

  :deep(.el-form-item__content) {
    font-size: 16px;
  }

  :deep(.el-collapse-item__content) {
    color: #606266;
  }

  :deep(.el-button--small) {
    font-size: 16px;
  }

  :deep(.el-button--mini) {
    font-size: 16px;
  }
}

.title {
  position: relative;
  text-align: center;
  font-size: 28px;
  color: #303133;
  height: 90px;
  /* padding: 40px 0; */

  .back {
    position: absolute;
    top: 20px;
    right: 0;
    padding: 9px 18px;
  }
}</style>

